/**
 * 文本类组件页面展示
 * @author SPY
 * @date 2020/01/07
 */

import React from 'react';
import { Card, Row, Col, message } from 'antd';
import CopyToClipboard from './components/CopyToClipboard/CopyToClipboard';
import EllipsisText from './components/EllipsisText/EllipsisText';
import OnMouseText from './components/OnMouseText/OnMouseText';

class CopyTextPage extends React.Component {

    state = {
        data: ['首页', '人事管理', '办公管理', '考勤管理', '系统设置'],
    }

    onMouseClick = (title, key) => {
        message.success(`您点击了: ${title}`);
    }

    render() {

        const { data } = this.state;

        return (
            <Card>
                <Row gutter={24}>
                    <Col span={12}>
                        <Card
                            type='inner'
                            title='Copy 到剪切板'
                            style={{ borderTop: '1px solid #e8e8e8', marginTop: '2%', textAlign: 'center' }}
                            size='small'
                        >
                            <CopyToClipboard text='不逼自己一把,永远不知道自己有多强！' />
                        </Card>
                    </Col>

                    <Col span={12}>
                        <Card
                            type='inner'
                            title='Text文本省略'
                            style={{ borderTop: '1px solid #e8e8e8', marginTop: '2%', textAlign: 'center' }}
                            size='small'
                        >
                            <EllipsisText text='上海科技有限公司' length={5} style={{ fontSize: 14, color: 'red' }} />
                        </Card>
                    </Col>

                    <Col span={12}>
                        <Card
                            type='inner'
                            title='移入移出文本'
                            style={{ borderTop: '1px solid #e8e8e8', marginTop: '2%', textAlign: 'center' }}
                            size='small'
                        >
                            <OnMouseText data={data} onClick={this.onMouseClick} />
                        </Card>
                    </Col>

                </Row>
            </Card>
        );
    }
}

export default CopyTextPage;